<template>
	<view class="dingdan">
		<view class="top">
			<!-- <image class="img" src="/static/login/logo.png" mode="widthFix"></image> -->
			<view style="font-size: 14px; color: #666;" class="img">
				v-美亿联
			</view>
			<view class="goTip" @click="getList(2)">
				<image class="goTipimg" src="~@/static/shop/location2.png" mode="widthFix"></image>
				<text class="ctn">{{locationName}}</text>
				<image class="right" src="~@/static/shop/right.png" mode="widthFix"></image>
			</view>

		</view>
		<view class="goSeach">
			<input class="goSeachipt" v-model.trim="searchValue" @input="inputChange" type="text" placeholder="输入商家名、服务项目" value="">
			</input>
			<image class="seachimg" src="~@/static/shop/search.png" mode="widthFix"></image>
			<text @click="jl" class="seachName">我的记录</text>
		</view>
		<view class="tab_box">
			<u-tabs :list="types" @change="tabChange" :current="current" active-color="#F9D31F"></u-tabs>
		</view>
		<view v-for="(item,index) in showShops" :key="index" @click="toDetail('/pages/shop/detail?id='+item.id)">
			<view class="listdata">
				<image class="listimg" :src="item.image_photo" mode=""></image>
				<view class="Skeleton">
					<text class="name">{{item.name}}</text>
					<view class="divC">
						<text class="address">{{item.address}}{{item.full_address}}</text>
						<text class="addM">{{item.distance_unit}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let time = 0;
	export default {
		data() {
			return {
				activeId:-1,
				types: [],
				shops: [],
				showShops:[],
				current: 0,
				searchValue:'',
				locationName:''
			}
		},
		onLoad({id}) {
			this.getTypes();
			if(id) this.activeId = id;
		},
		methods: {
			jl(){
				uni.navigateTo({
					url:'/pagesuser/order/order'
				})
			},
			toDetail(url=''){
				uni.navigateTo({url})
			},
			tabChange(index){
				this.current = index;
				this.getList();
			},
			inputChange(){
				clearTimeout(time)
				time = setTimeout(()=>this.filterValidShop(),300)
			},
			async getTypes(){
				const res = await this.$http.post('shopCategory')
				this.types = res.data || [];
				if(this.activeId) {
					const result = this.types.findIndex(item => item.id == this.activeId)
					 if(~result) this.current = result;
				}
				if(this.id || this.types.length) this.getList();
			},
			/**
			 * 获取定位信息
			 * type = 1 自动获取
			 * type = 2 手动选择
			 */
			async getList(type = 1){
				const location = await this.getLocation(type);
				this.locationName = location.name ? location.name : '您选择的位置'
				const query = {type_id: this.types[this.current].id,};
				if(location.longitude) query.longitude = location.longitude;
				if(location.latitude) query.latitude = location.latitude;
				const res = await this.$http.post('shops',query)
				this.shops = res.data || [];
				this.filterValidShop();
			},
			filterValidShop(){
				if(this.searchValue){
					this.showShops = this.shops.filter(item => ~item.name.indexOf(this.searchValue))
				}else{
					this.showShops = [...this.shops]
				}
			},
			/**
			 * 获取定位信息
			 * type = 1 自动获取
			 * type = 2 手动选择
			 */
			getLocation(type = 1){
				if(type !== 1 && type !== 2) type = 1
				return new Promise((resolve,rej)=>{
					uni.authorize({
						scope:'scope.userLocation',
						success:()=>{
							if(type === 1){
								uni.getLocation({
									geocode:true,
									success:res => {
										resolve(res)
									},
									fail() {
										resolve({})
									}
								})
							}else{
								uni.chooseLocation({
								    success:  (res)=> {
										resolve(res)
								    },
									fail() {
										resolve({})
									}
								});
							}
						},
						fail() {
							uni.showModal({
								title:'温馨提示',
								content:'为了享受智能小程序，您必须授权！',
								showCancel:false,
								confirmText:'确认授权'
							}).then(res=>{
								if(res[1]['confirm']){
									uni.openSetting()
								}
								resolve({})
							}).catch(err=>resolve({}))
						}
					})
				})
				
			}
		}
	}
</script>



<style scoped lang="scss">
	$pWidth:30rpx;
	.dingdan {
		background-color: #eee;
		padding: 24rpx $pWidth;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.img {
			width: 128rpx;
			height: 39rpx;
		}
		
		.goTip {
			font-size: 25rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			margin: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.goTipimg {
				width: 20rpx;
				height: 26rpx;
				margin: 0 12rpx;
				flex-shrink: 0;
			}
			.ctn {
				max-width: 400rpx;
				text-overflow: ellipsis;
				word-wrap: normal;
			}
			.right{
				margin-left: 12rpx;
				width: 13rpx;
				height: 20rpx;
				flex-shrink: 0;
			}
		}
	}

	.goSeach {
		margin-top: 19rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		position: relative;
		
		.seachimg {
			width: 22rpx;
			height: 22rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 24rpx
		}
		
		.goSeachipt {
			width: 542rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 34rpx;
			box-sizing: border-box;
			padding: 0 12rpx 0 70rpx ;
			font-size: 25rpx;	
		}
		
		.seachName {
			margin-left: 12rpx;
			font-size: 28rpx;
			color: #F9D31F;
			white-space: nowrap;
		}
	}

	.tab_box{
		width: calc(100vw - $pWidth*2);
		overflow: scroll;
	}
	
	

	.listdata {
		margin: 25rpx 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: stretch;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		
		.listimg {
			width: 151rpx;
			height: 151rpx;
			background: #E1E1E1;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-right: 15rpx;
		}
		
		.Skeleton {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			justify-content: space-between;	
			font-size: 28rpx;
			color: #333333;
			flex:1;
			padding: 0;
			background-color: transparent;
			.divC {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				.address{
					color: #999999;
					word-break: break-word;
				}
				.addM{
					color: #646464;
					margin-left: 12rpx;
				}
			}
		}
	}

	
	::v-deep .u-tabs {
		width: 100%;
		background: #eee !important;
	}
</style>

